<script setup lang='ts'>
// 自定义 规则
interface CardItem {
    phone: string,
    brand: string,
    iccid: string,
    stid: number,
    state: 0 | 1
}

import { onMounted, ref, reactive, defineProps } from 'vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll';
import { https } from '@/api/api';
import { useMarkerStore, useUserStore } from '@/store/index'
import { onLoad } from '@dcloudio/uni-app';
import { showToast } from '@/public';
const { mescrollInit, downCallback, getMescroll } = useMescroll();
const markerStore = useMarkerStore();
const userStore = useUserStore();
/**
 * @property 变量
 */
// 上拉 配置
const upOption = {
    auto: false,
    empty: {
        use: true
    },
    textNoMore: '~没有更多了~',
    onScroll: true,
    toTop: {
        bottom: '300rpx',
        zIndex: 999
    },
    noMoreSize: 6
}
// 归属地
const belongingPlace = ref('');
// 品牌列表
const brandList = ref<Array<Array<string>>>([]);
// 品牌选择
const brandShow = ref(false);
// 选择出的品牌
const brandText = ref('');
// 号卡列表
const numberCard = ref<Array<CardItem>>([]);
// 待提交号码列表
const submittedNumberList = ref<Array<{ phone: string, stid: number }>>([])
//系统底部高度
const statusBottomHeight = ref(0);
uni.getSystemInfo({
    success: function (info) {
        // 获取安全区域的 bottom 值，单位px
        statusBottomHeight.value = info?.safeAreaInsets?.bottom || 0;
    }
});
// 二次确认弹窗
const phoneSecondShow = ref(false);
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
// 获取卡品列表
const apiCardProductsList = async () => {
    const res = await https({
        mode: 'cardProducts',
        name: userStore.info?.type === 1 ? 'apiGetMarkerStockList' : 'apiGetMarkerStockList_Manager',
        data: {
            mid: String(markerStore.marker.mid),
            page: String(getMescroll().num),
            size: String(getMescroll().size),
            brand: brandText.value === '全部' ? "" : brandText.value,
            place: belongingPlace.value
        }
    })
    getMescroll().endBySize(res.data?.list?.length || 0, res?.data?.count || 0);
    if (res.code !== 0) return showToast(res.msg);
    if (getMescroll().num == 1) numberCard.value = res.data.list
    else numberCard.value = [...numberCard.value, ...res.data.list]

}
// 获取品牌列表
const apiBrandList = async () => {
    const res = await https({
        mode: 'cardProducts',
        name: userStore.info?.type === 1 ? 'apiGetHasBrandList' : 'apiGetHasBrandList_Manager',
        data: {
            mid: String(markerStore.marker.mid),
        }
    })
    // console.log(res);
    if (res.code !== 0) return showToast(res.msg);
    brandList.value = [['全部', ...res.data.list]]
}
// 提交手机号
const apiSetPhoneActivate = async () => {
    const res = await https({
        mode: 'cardProducts',
        name: 'apiSetPhoneActivate',
        data: {
            list: JSON.stringify(submittedNumberList.value.map(item => item.stid)),
            mid: String(markerStore.marker.mid),
        }
    })
    showToast(res.data.msg)
    if (res.code === 0) apiCardProductsList();
}
/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
const upCallback = () => {
    apiCardProductsList();
}
//选择完品牌
const changBrand = (e: { value: Array<string> }) => {
    brandText.value = e.value[0]
    brandShow.value = false
    getMescroll().resetUpScroll(false);
}
// 点击搜索
const clickSearch = () => {
    getMescroll().resetUpScroll(false);
}
// 点击提交
const clickSubmit = () => {
    // 判断是否有提交内容
    if (submittedNumberList.value.length <= 0) return showToast('请选择要提交的号码');

    phoneSecondShow.value = true

}
// 选中号码
const changPhoneCheckbox = (item: CardItem) => {
    if (submittedNumberList.value.some(v => v.stid === item.stid)) {
        submittedNumberList.value = submittedNumberList.value.filter(item => item.stid !== item.stid);
    } else {
        submittedNumberList.value.push({ phone: item.phone, stid: item.stid });
    }
}
/**
 * @property 内置方法
 */
onLoad(() => {
    apiBrandList();
})

</script>
<template>
    <div class="w-[100vw] h-[100vh] p-3.5 flex-col flex bg-[#f5f5f5]">
        <up-navbar title="店铺号卡" :autoBack="true" placeholder> </up-navbar>
        <div class="bg-[#fff] p-3.5 mb-3.5">
            <!-- <up-input placeholder="归属地查询" v-model="belongingPlace">
                <template #suffix>
                    <span class="font-size-24" @click="clickSearch">搜索</span>
                </template>
</up-input> -->
            <div class="w-[100%] pl-3.5 pr-3.5 fra frb h-76" style="border: 1rpx solid #f5f5f5"
                @click="brandShow = true">
                <text class="mr-3.5">{{ brandText || '号卡品牌' }}</text>
                <up-icon name="arrow-down"></up-icon>
            </div>
        </div>
        <div class="flex-1 overflow-hidden">
            <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
                <div v-for="item in numberCard" :key="item.phone" @click="changPhoneCheckbox(item)"
                    class="bg-[#fff] b-rd-2 mb-3 frb p-3.5 leading-8 w-[100%] relative">
                    <div class="flex flex-col font-size-24">
                        <text>品牌：{{ item.brand }}</text>
                        <text>手机号：{{ item.phone || '--' }}</text>
                        <text>序列号：{{ item.iccid || '--'}}</text>
                    </div>
                    <up-checkbox :name="item.phone" :usedAlone="true" v-if="userStore.info?.type === 1"
                        :checked="submittedNumberList.some(v => v.stid === item.stid)"
                        @change="changPhoneCheckbox(item)"></up-checkbox>
                    <div v-if="userStore.info?.type !== 1" class="absolute top-0 right-0 w-144 h-60 c-[#fff] fc" :style="{
                        background: item.state ? '#00BD78' : '#FF2A2A',
                        borderTopRightRadius: '16rpx',
                        borderBottomLeftRadius: '16rpx'
                    }">
                        {{ item.state ? '已提交' : '未提交' }}
                    </div>
                </div>
            </mescroll-uni>
        </div>
        <up-button class="h-88 w-680" text="提交" @click="clickSubmit" color="#275EFF"
            v-if="userStore.info?.type === 1"></up-button>
        <div :style="{ height: statusBottomHeight + 'px' }">

        </div>
    </div>
    <up-picker :show="brandShow" :columns="brandList" @confirm="changBrand" @cancel="brandShow = false"></up-picker>
    <!-- 二次确认弹窗 -->
    <up-popup :show="phoneSecondShow" @close="phoneSecondShow = false" mode="center" round="12"
        :safeAreaInsetBottom="false">
        <div class="w-680 p-3.5">
            <div class="fc fw500">
                号码核对
            </div>
            <div class="leading-6" v-for="item in submittedNumberList" :key="item.stid">
                <text>手机号：</text>
                <text>{{ item.phone }}</text>
            </div>
            <div class="flex frb mt-3.5">
                <up-button :customStyle="{
                    width: '240rpx'
                }" text="取消" @click="phoneSecondShow = false"></up-button>
                <up-button :customStyle="{
                    width: '240rpx'
                }" text="确认提交" @click="() => { apiSetPhoneActivate(); phoneSecondShow = false }"
                    color="#275EFF"></up-button>
            </div>
        </div>

    </up-popup>
</template>
<style lang="scss" scoped></style>